<template>
  <view class="image-group">
    <image v-for="(item, index) of list" :key="index" class="image" :style="{width: newWidth,height:newHeight}" :src="item" @click.stop="handlePreview(item)"></image>
  </view>
</template>

<script>
export default {
  name: 'preview',
  props: {
    list: {
      type: Array,
      default() {
				return []
			}
    },
    width: {
      type: Number,
      default: 170
    },
    height: {
      type: Number,
      default: 156
    }
  },
	computed:{
		newWidth() {
			return uni.upx2px(this.width) + 'px'
		},
		newHeight() {
			return uni.upx2px(this.height) + 'px'
		}
	},
	data() {
		return {
			style: {
				width: '80px',
				height: '20px'
			}
		}
	},
  methods: {
    handlePreview(url) {
      uni.previewImage({
        current: url,
				urls: this.list,
				indicator: 'number'
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.image-group{
  width: 100%;
  display: flex;
	.image{
		margin-right: 10upx;
		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}
  
}
</style>